<!-- 登录 -->
<template>
	<view class="content">
		<view class="login_from">
			<u-form style="width: 100%;" :model="form" ref="uForm">
				<u-form-item border-bottom="true" label="" prop="username">
					<u-input placeholder="请输入账号" v-model="form.username" />
				</u-form-item>
				<u-form-item border-bottom="true" label="" prop="password">
					<u-input placeholder="请输入密码" v-model="form.password" type="password" />
				</u-form-item>
			</u-form>
			<view class="sub_btn" @click="submit">登陆</view>
			<view class="sub_tip">登录代表您已同意格物设备管理<text>用户协议</text>和<text>隐私政策</text></view>
		</view>
		<view class="LOGO">
			<image src="@/static/img/login/LOGO.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: 'admin',
					password: 'admin123'
				},
				loginging: false,
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 ['change', 'blur']
						trigger: 'blur',
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			};
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				return
				if (!this.loginging) {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							let that = this
							this.loginging = true
							// that.getwxMiniMenuListVo()
							//联网加载数据
							this.apis.loginApi.authLogin(this.form).then(res => {
								if (res.code == 200) {
									uni.setStorageSync("isLogin", true)
									this.$store.commit("user/setIsLogin", true)
									uni.setStorageSync("userInfo", res.data.userInfo)
									uni.setStorageSync("token", res.data.token)
									this.getwxMiniMenuListVo(res.data.userInfo.roles[0].roleId)
									uni.showToast({
										icon: "none",
										title: "登录成功"
									})
									uni.switchTab({
										url: "/pages/tome/tome"
									})
								}
								this.loginging = false
							}).catch((err) => {
								console.log(err);
								uni.showToast({
									icon: "none",
									title: err.data.msg
								})
								this.loginging = false
								//联网失败的回调,隐藏下拉刷新的状态
								// this.mescroll.endErr();
							})

						} else {
							console.log('验证失败');
						}
					});
				}

			},
			getwxMiniMenuListVo(roleId) {
				let that = this
				//联网加载数据
				this.apis.commonApi.wxMiniMenuListVo({
					roleId,
				}).then(res => {
					const data = this.toTree(res.data)
					this.$store.commit("jurisdiction/setPrivilegesInfo", data[0].children)
					console.log('data', data);
					uni.setStorage({
						key: "menuRolesTree",
						data: data[0].children,
						fail(err) {
							console.log("saveFalie", err);
						},
						success(res) {
							console.log("saveSuc", res);
						}
					})
					uni.setStorageSync("menuRolesList", res.data)
					// uni.setStorageSync("menuRolesTree",data)
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
					// this.mescroll.endErr();
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content {
		background: url('@/static/img/login/编组 3.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding: 100rpx 40rpx;
		height: calc(100vh - 90rpx);

		.LOGO {
			margin-top: 300rpx;

			image {
				height: 64rpx;
				width: 314rpx;
			}
		}

		.login_from {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 90rpx 50rpx;
			border-radius: 30rpx;

			.sub_btn {
				box-sizing: border-box;
				padding: 26rpx 250rpx;
				background: #44D94B;
				border-radius: 50rpx;
				color: #FFFFFF;
				opacity: 0.65;
				font-size: 34rpx;
				margin: 80rpx 0 30rpx 0;
			}

			.sub_tip {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;

				text {
					color: #44D94B;
				}
			}

			.u-form-item {
				border-bottom: 1rpx solid #EEEEEE;
			}

			/deep/ .u-form-item__message {
				padding-left: 0 !important;
			}
		}
	}
</style>
